<template>
  <div>
    <div class="resource-list">
      <div class="top-title">
        <span>资源名称：</span>
         <el-input
          class="keys"
          v-model="keyword"
          autocomplete="off"
          placeholder="请输入关键字"
        ></el-input>
        <el-button type="primary" @click="myResource">查询</el-button>
        <el-button type="primary" plain @click="addClass">添加资源</el-button>
      </div>
      <div class="nums">共有<span> {{tableData.length}} </span>个资源</div>
      <InsTable table-height="600" :table-head="tableHead" :table-data="tableData" :index="true">
        <!-- 自定义列 类型 -->
        <el-table-column slot="resourceType" slot-scope="headScope"  align="center" :label="headScope.head.label">
          <template slot-scope="scope">
            {{ scope.row.resourceType == '1' ? '文件' : scope.row.resourceType == '2' ? '测验': scope.row.resourceType == '3' ? '问卷' : '' }}
          </template>
        </el-table-column>
        <!-- 自定义列 操作 -->
        <el-table-column slot="opera" slot-scope="headScope"  fixed="right" align="center" :label="headScope.head.label">
          <template slot-scope="scope">
            <el-button type="text" title="删除" @click="remove(scope.row)"><i class="el-icon-delete" /></el-button>
          </template>
        </el-table-column>
      </InsTable>
     </div>
    <!-- dialog 创建班级-->
    <el-dialog
      title="创建班级"
      :center="true"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      width="600px"
      :visible.sync="isShowaddClass"
      class="add-class"
    >
      <div class="top-title flex-row" v-if="classDetail && classDetail.id">
        <span class="title">英语视听说</span>
        <span>共15章30节</span>
      </div>
      <el-form
        :model="infoForm"
        status-icon
        :rules="rules"
        ref="infoForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="mobile" label="班级名称：">
          <el-input
            v-model="infoForm.className"
            autocomplete="off"
            placeholder="请输入班级名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="mobile" label="学生加入：">
          <el-button :type="infoForm.joinAudit == 1 ? 'primary' : ''" @click="changeJoinAudit(1)">需要审核</el-button>
          <el-button :type="infoForm.joinAudit == 2 ? 'primary' : ''" @click="changeJoinAudit(2)">不需要审核</el-button>
        </el-form-item>
        <el-form-item prop="mobile" label="老师姓名：" v-if="classDetail && classDetail.id">
          {{ classDetail.teacherName }}
        </el-form-item>
         <el-form-item prop="mobile" label="班级代码：" v-if="classDetail && classDetail.id">
           <div class="flex-row">
             <span>{{ classDetail.classCode }}</span>
             <span class="view" @click="isShowQrcode = !isShowQrcode">显示二维码</span>
           </div>
          <img v-if="isShowQrcode" :src="classDetail.qrCode" class="qr-code" />
        </el-form-item>
      </el-form>
      <div v-if="classDetail && classDetail.id">
        <div class="student-list flex-row">
          <span class="title">学生列表（30人）</span>
          <span class="view" @click="addStudent">添加学生</span>
        </div>
        <ul class="list" v-if="classDetail.studentList &&classDetail.studentList.length > 0">
          <li class="item flex-row" v-for="(item, index) of classDetail.studentList" :key="index">
            <span class="name ellipsis">{{ item.stuName }}</span>
            <span class="other ellipsis">手机：{{ item.mobile }}</span>
            <span class="other ellipsis">学号：{{ item.stuNo }}</span>
          <i class="el-icon-delete view" @click="deleteStudent(item)"></i>
          </li>
        </ul>
        <div v-else class="g-no-data">暂无学生</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="my-button" @click="saveClass">保存班级</el-button>
      </div>
    </el-dialog>
    <!-- 添加学生 -->
    <el-dialog
      title="添加学生"
      :center="true"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      width="500px"
      :visible.sync="isShowaddStudent"
      class="add-student"
    >
      <el-input
        v-model="studentPhone"
        autocomplete="off"
        placeholder="请输入手机号"
        @input="changePhone"
      ></el-input>
      <div class="student-detail flex-row" v-if="studentDetail && studentDetail.name">
        <img :src="studentDetail.headImgUrl" class="head-img" />
        <div class="right-content flex-col">
          <span>姓名：{{ studentDetail.name}}</span>
          <span>学号：{{ studentDetail.stuNo}}</span>
          <span>手机号：{{ studentDetail.mobile}}</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="my-button" @click="saveStudent" :disabled="!studentPhone">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import InsTable from '@/components/InsTable'
import {
  saveClass,
  viewClass,
  findStudent,
  addStudent,
  updateClass,
  deleteStudent
} from '@/api/teacher/manage/class'
import {
  myResource,
  shareResource,
  deleteResource
} from '@/api/teacher/manage/resource'

export default {
  name: 'index',
  data () {
    return {
      keyword: '',
      tableHead: [
        {
          label: '资源名称', prop: 'resourceName', width: 300
        }, {
          label: '类型', prop: 'resourceType', isSlot: true
        }, {
          label: '关键字', prop: 'keyWord', width: 300
        }, {
          label: '上传时间', prop: 'createdTime', width: 200
        }, {
          label: '文件大小', prop: 'fileSize'
        }, {
          label: '操作', prop: 'opera', isSlot: true
        }
      ],
      tableData: [],
      isShowaddClass: false,
      infoForm: {
        className: '',
        joinAudit: 1
      },
      rules: {},
      classDetail: {},
      isShowQrcode: false,
      isShowaddStudent: false,
      studentPhone: '',
      studentDetail: {},
      classId: ''
    }
  },
  components: {
    InsTable
  },
  props: {
    resourceType: {
      type: String,
      default: 'my'
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      if (this.resourceType === 'my') {
        this.myResource()
      } else {
        this.shareResource()
      }
    },
    // 获取我的资源
    async myResource () {
      const res = await myResource({
        toDate: '',
        keyword: this.keyword,
        fromDate: ''
      })
      if (res.code === '200') {
        this.tableData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    // 获取共享资源
    async shareResource () {
      const res = await shareResource({
        toDate: '',
        keyword: this.keyword,
        fromDate: ''
      })
      if (res.code === '200') {
        this.tableData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    // 删除资源
    remove (row) {
      this.$confirm(`确定删除资源 - ${row.resourceName}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteResource({
          resourceId: row.id
        })
        if (res.code === '200') {
          this.$message.success('删除成功')
          this.myResource()
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 添加班级
    addClass () {
      this.isShowaddClass = true
      this.infoForm = {
        className: '',
        joinAudit: 1
      }
    },
    changeJoinAudit (type) {
      this.$set(this.infoForm, 'joinAudit', Number(type))
    },
    // 查看班级
    async viewClass (row) {
      this.classId = row.classId
      this.getViewClass()
    },
    // 获取班级信息
    async getViewClass () {
      const res = await viewClass({
        classId: this.classId
      })
      if (res.code === '200') {
        this.classDetail = res.data
        this.isShowaddClass = true
        this.infoForm = {
          className: this.classDetail.className,
          joinAudit: Number(this.classDetail.stuJoinIsAuditing)
        }
      } else {
        this.$message.error(res.message)
      }
    },
    // 保存/修改班级信息
    async saveClass () {
      if (!this.classId) {
        // 新建班级
        if (!this.infoForm.className && !this.infoForm.className.trim()) {
          return this.$message.error('请输入班级名称')
        }
        const res = await saveClass(this.infoForm)
        if (res.code === '200') {
          this.$message.success('添加成功')
          this.isShowaddClass = false
        } else {
          this.$message.error(res.message)
        }
      } else {
        // 修改班级信息
        if (!this.infoForm.className && !this.infoForm.className.trim()) {
          return this.$message.error('请输入班级名称')
        }
        const param = Object.assign(this.infoForm, {
          classId: this.classId
        })
        const res = await updateClass(param)
        if (res.code === '200') {
          this.$message.success('修改成功')
          this.isShowaddClass = false
        } else {
          this.$message.error(res.message)
        }
      }
    },
    // 添加学生
    addStudent () {
      this.isShowaddStudent = true
      this.studentPhone = ''
      this.studentDetail = {}
    },
    // 修改添加学生手机号
    changePhone () {
      this.studentDetail = {}
    },
    // 获取学生信息/添加学生
    async saveStudent () {
      if (this.studentDetail && !this.studentDetail.name) {
        // 通过手机号 查看学生信息
        const reg = /^1[3456789]\d{9}$/
        if (reg.test(this.studentPhone)) {
          const res = await findStudent({
            mobile: this.studentPhone
          })
          if (res.code === '200') {
            this.studentDetail = res.data
          } else {
            this.$message.error(res.message)
          }
        } else {
          this.$message.warning('请填写正确的手机号')
        }
      } else {
        // 添加学生
        const res = await addStudent({
          classId: this.classId,
          stuId: this.studentDetail.id
        })
        if (res.code === '200') {
          this.isShowaddStudent = false
          this.$message.success('添加成功')
          this.getViewClass()
        } else {
          this.$message.error(res.message)
        }
      }
    },
    // 删除学生
    deleteStudent (row) {
      this.$confirm(`确定删除学生- ${row.stuName} ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteStudent({
          id: row.id
        })
        if (res.code === '200') {
          this.$message.success('删除成功')
          this.getViewClass()
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    }
  }
}
</script>
<style scoped lang="scss">
.resource-list {
  height: auto;
  background:rgba(255,255,255,1);
  border:1px solid rgba(229,229,229,1);
  border-radius:0px 0px 5px 5px;
  .top-title {
    padding: 20px;
    .keys {
      display: inline-block;
      width: 200px;
      margin-right: 15px;
    }
  }
  .nums {
    margin-bottom: 20px;
    font-size: 14px;
    padding-left: 20px;
    span {
      color: #F86433;
    }
  }
  .qr-code {
    width: 100px;
    height: 100px;
  }
}
.my-button {
  ::v-deep &.el-button--primary {
    width: 350px;
    height: 55px;
    border-radius: 45px;
    font-size: 18px;
  }
}
.add-class {
  .view {
    color: #009CF6;
    cursor: pointer;
  }
  .top-title {
    padding-bottom: 20px;
    border-bottom: 1px solid #E9E9E9;
    .title {
      font-size: 26px;
      font-weight:bold;
      color:rgba(16,29,55,1);
    }
  }
  .demo-ruleForm {
    border-bottom: 1px solid #E9E9E9;
    padding-top: 20px;
   ::v-deep .el-form-item {
      margin-bottom: 15px;
    }
    .qr-code {
      width: 150px;
      height: 150px;
      display: block;
    }
  }
  .student-list {
    margin-top: 20px;
    .title {
      color: #101D37;
      font-size: 18px;
    }
  }
  .list {
    .item {
      height: 60px;
      border-bottom: 1px solid #E9E9E9;
      span {
        width: 35%;
        text-align: left;
        display: inline-block;
      }
      .name {
        width: 15%;
        color: #101D37;
        font-size: 18px;
      }
    }
  }
}
.student-detail {
  justify-content: center;
  margin-top: 30px;
  .head-img {
    width: 110px;
    height: 110px;
    margin-right: 20px;
  }
  .right-content {
    align-items: flex-start;
    height: 110px;
  }
}

</style>
